<template>
	<!-- 货物价值 -->
	<div class="cargoValue">
		<div class="top">
			<image class="img" src="../../static/images/Shop/service.png"></image>
			<div class="unitPrice">
				<div class="name">
					<span>
						<slot name="shopName"></slot>
					</span>
					<slot name="residue"></slot>
				</div>
				<div class="numVal">
					<!-- 件数，价值 -->
					<slot name="countNum"></slot>
					<!-- 件数修改 -->
					<slot name="countChange"></slot>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="specification">
				<slot name="specification">
					<!-- 					<span>规格</span>
					<span>100USDT</span> -->
				</slot>
			</div>
			<div class="freight">
				<slot name="freight">
					<span>运费</span>
					<span>100USDT</span>
				</slot>
			</div>
			<slot name="line"></slot>
			<div class="NeedToPay">
				<slot name="needToPay">
					<span>需付款</span>
					<span class="sum colorRed">1100USDT</span>
				</slot>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
	@import "../../common.scss";

	// 货物价值
	.cargoValue {
		padding: $contentPadding 0;
		margin: $distance 0;
		width: 91%;
		margin: 32px auto;
		// height: 365px;
		background: #2a2b2d;
		border-radius: 16px;
		box-sizing: border-box;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex: 1;

			.img {
				width: 160px;
				height: 160px;
			}

			.unitPrice {
				margin-left: 28px;
				flex: 1;

				.name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 38px;
					font-size: 32px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 45px;
					letter-spacing: 1px;

					::v-deep.residue {
						--van-tag-padding: 10px;
						background-color: transparent;
					}
				}

				.numVal {
					display: flex;
					justify-content: space-between;
					font-size: 28px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 40px;
					letter-spacing: 1px;
				}
			}
		}

		.bottom {
			font-size: 24px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 80px;

			.specification,
			.freight,
			.NeedToPay {
				display: flex;
				justify-content: space-between;

				.sum {
					font-size: 28px;
				}

				.colorRed {
					color: #f8444d;
				}
			}
		}
	}
</style>